<template>
  <div class="hotActivity">
    <top></top>
    <mall-header></mall-header>
    <div class="hotActivity_advert">
      <img src="@/assets/images/supplierDisplayCenter/hotPopularStoresListTop.png" alt="" />
    </div>
    <div class="hotActivity_filter w1200">
      <div class="hotActivity_filter_title">热门供应商</div>
      <div class="catalogBox" v-if="topFormData.length > 0">
        <div class="titBox" v-for="(item, ind) in topFormData" :key="ind">
          <span class="firstChild">{{ item.name }}:</span>
          <span v-for="(child, index) in item.value" :key="index" class="primary_text_color">
            <template v-if="index < item.value.length - 1">{{ child.name }}、</template>
            <template v-else>{{ child.name }}</template>
          </span>
          <span @click="removeItem(item, ind)">
            <img src="../../assets/images/supplierDisplayCenter/react.png" alt style="cursor: pointer" />
          </span>
        </div>
        <div style="cursor: pointer; display: inline-block" @click="resetEffect">
          清空筛选
        </div>
      </div>
      <div class="filter-wrapper">
        <filter-item :default-params="industryParams" :data="industryList" title="行业分类"
          @ok="handleFilter($event, 'industryParams', '行业分类')"></filter-item>

        <filter-item :default-params="fundParams" :data="fundList" title="注册资金"
          @ok="handleFilter($event, 'fundParams', '注册资金')"></filter-item>
        <filter-item :default-params="addrParams" :data="addrList" title="注册地址"
          @ok="handleFilter($event, 'addrParams', '注册地址')"></filter-item>
        <a-row class="hotActivity_filter_row">
          <a-col :span="2" style="
                font-family: PingFangSC-Medium, PingFang SC, sans-serif;
                line-height: 30px;
                font-size: 11px;
                color: #323232;
              ">供应商:</a-col>
          <a-col :span="20">
            <a-input placeholder="请输入供应商名称" :style="{ width: '200px' }" />
          </a-col>
        </a-row>
      </div>
    </div>
    <div class="hotActivity_list w1200">
      <a-row class="hotActivity_list_item" v-for="i in 2" :key="i">
        <a-col :span="14" class="hotActivity_item_left">
          <div class="hotActivity_item_info">
            <img src="@/assets/images/supplierDisplayCenter/info.png" alt="" />
            <a-row>
              <a-col class="info_middle" :span="12">
                <p class="info_title">经营品类</p>
                <p class="info_num">18</p>
              </a-col>
              <a-col class="info_middle" :span="12">
                <p class="info_title">产品数量</p>
                <p class="info_num">2450</p>
              </a-col>
            </a-row>
            <div class="info_more">查看更多 ></div>
          </div>
          <div class="hotActivity_item_sub">
            <div class="sub_title_wrap">
              <span class="sub_title">广州市办公货币有限公司</span>
              <div class="sub_icon_wrap">
                <div class="sub_icon1">
                  <img src="@/assets/images/supplierDisplayCenter/认证.png" alt="" />
                  <span>认证</span>
                </div>
                <div class="sub_icon2">
                  <span>信用等级AAA</span>
                </div>
              </div>
            </div>
            <div class="evaluation_wrap">
              <img src="@/assets/images/supplierDisplayCenter/biaoqian1.png" />
              <img src="@/assets/images/supplierDisplayCenter/biaoqian2.png" />
              <img src="@/assets/images/supplierDisplayCenter/biaoqian3.png" />
              <img src="@/assets/images/supplierDisplayCenter/biaoqian4.png" />
            </div>
            <div class="introduce">
              欧菲斯集团股份有限公司是全国较大的一站式办公整体解决方案提供商之一，拥有行业成熟且先进的服务标准，覆盖全国的高效服务网络。在科技发展日新月异的互联共享时代，欧菲斯办公伙伴以O2O电商平台以创新商业模式，将行业核心资源进行全面整合，通过打造全新需求生态链与办公解决方案，为全国政府及企业客户解决从办公物。
            </div>
            <div class="registerInfo">
              存续  |  注册资金  217,230.00万人民币  |  2026-07-12 成立  |  江苏省
            </div>
          </div>
        </a-col>
        <a-col :span="10" class="hotActivity_item_right">
          <div class="hotActivity_right_col">
            <img src="../../assets/images/supplierDisplayCenter/adv.png" alt style="cursor: pointer" />
            <p>华晨宝马3系轿车(05-)(13-)(19-)前挡风玻璃 免费安装 (19-X)前挡/镀膜/雨感/摄像</p>
          </div>
          <div class="hotActivity_right_col">
            <img src="../../assets/images/supplierDisplayCenter/adv.png" alt style="cursor: pointer" />
            <p>华晨宝马3系轿车(05-)(13-)(19-)前挡风玻璃 免费安装 (19-X)前挡/镀膜/雨感/摄像</p>
          </div>
          <div class="hotActivity_right_col">
            <img src="../../assets/images/supplierDisplayCenter/adv.png" alt style="cursor: pointer" />
            <p>华晨宝马3系轿车(05-)(13-)(19-)前挡风玻璃 免费安装 (19-X)前挡/镀膜/雨感/摄像</p>
          </div>
        </a-col>
      </a-row>
    </div>
    <a-row class="pagination-box w1200">
      <a-col :span="6" class="pagination-l">
        <div>
          共 {{ paging.total }} 条记录 第 {{ paging.current }} /
          {{ Math.ceil(paging.total / paging.pageSize) }} 页
        </div>
      </a-col>
      <a-col :span="18" class="pagination-r">
        <a-pagination :pageSizeOptions="paging.pageSizeOptions" :total="paging.total" showSizeChanger showQuickJumper
          :pageSize="paging.pageSize" v-model="paging.current" @showSizeChange="onShowSizeChange" @change="pageChange">
          <template slot="buildOptionText" slot-scope="props">
            <span v-if="props.value !== '50'">{{ props.value }}条/页</span>
            <span v-if="props.value === '50'">全部</span>
          </template>
        </a-pagination>
      </a-col>
    </a-row>
  </div>
</template>
  
<script>
import FilterItem from "@/components/base/FilterItem";
import common from "@/assets/js/common.js";
import Top from '@/components/base/Top.vue'
import MallHeader from '@/components/base/MallHeader.vue'
export default {
  name: "hotActivity",
  components: {
    FilterItem,
    Top,
    MallHeader
  },
  data() {
    return {
      rateNum: 3,
      meetingData: [],
      addrParams: [],
      addrList: [
        {
          code: "01",
          name: "北京市"
        },
        {
          code: "02",
          name: "天津市"
        }
      ],
      industryParams: [],
      industryList: [
        {
          code: "01",
          name: "办公用品",
        },
        {
          code: "02",
          name: "服务产品",
        }
      ],
      topFormData: [],
      fundParams: [],
      fundList: [
        {
          code: "01",
          name: "500万以下",
        },
        {
          code: "02",
          name: "500万(含)~1000万",
        },
        {
          code: "03",
          name: "1000万(含)~5000万",
        },
        {
          code: "04",
          name: "5000万(含)~1亿",
        },
        {
          code: "05",
          name: "1亿及以上"
        }
      ],
      // 分页
      paging: {
        pageSizeOptions: common.pageConfig.pageSizeOptions,
        pageSize: common.pageConfig.pageSize,
        current: 1,
        total: 0,
      },
      beginTime: "",
      endTime: "",
    };
  },
  mounted() {
    this.loadData();
    this.getAreaList();
  },
  methods: {
    // 顶部删除事件
    removeItem(item, index) {
      this.topFormData.splice(index, 1);
      this._data[item.key].splice(0, this._data[item.key].length);
      this.loadData();
    },
    resetEffect() {
      this.topFormData.splice(0, this.topFormData.length);
      this.statusParams.splice(0, this.statusList.length);
      this.areaNameParams.splice(0, this.areaNameList.length);
      this.loadData();
    },
    enrollClick(item) {
      console.log(item);
      this.$refs.enrollModal.setTitleAndId(item.name, item.id);
      this.$refs.enrollModal.open();
    },
    loadData(reload) {
      if (reload) {
        this.paging.current = 1;
      }

      let param = {
        statusList: this.statusParams,
        areaNameList: this.areaNameParams,
        endTime: this.endTime,
        beginTime: this.startTime,
        showStatus: 1,
        page: this.paging.current,
        limit: this.paging.pageSize,
      };
      this.$http
        .post(
          appConfig.microServModules.supplierrest +
          "api/popularhotActivitys/popularhotActivitysPage",
          param
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.meetingData = res.data.data.records;
            this.paging.total = parseInt(res.data.data.total);

            console.log(this.meetingData);
          }
        });
    },
    getAreaList() {
      this.$http
        .get(
          appConfig.microServModules.supplierrest +
          "api/popularhotActivitys/queryAreaNameList"
        )
        .then((res) => {
          if (res.data.code == 0) {
            this.areaNameList = res.data.data.map((item) => {
              return { code: item, name: item };
            });
          }
        });
    },
    showDetail(item) {
      this.$router.push({ path: "hotActivityDetail", query: { id: item.id } });
    },
    handleFilter(e, key, title) {
      console.log(e)
      this._data[key] = e.map((item) => item.id);
      this._data[key].splice(0, 0);
      if (e.length > 0) {
        const index = this.topFormData.findIndex((item) => item.key === key);
        if (this.topFormData.length === 0 || index === -1)
          this.topFormData.push({ name: title, value: e, key: key });
        else {
          this.$set(this.topFormData[index], "value", [...e]);
        }
      }
      this.loadData(true);
      console.log(this._data);
    },
    onShowSizeChange(current, pageSize) {
      this.paging.pageSize = pageSize;
      this.paging.current = current;
      this.loadData(true);
    },
    //当前页改变
    pageChange(page, pageSize) {
      this.paging.current = page;
      this.paging.pageSize = pageSize;
      this.loadData(false);
    },
    onChange(dates, dateStrings) {
      this.startTime = dateStrings[0];
      this.endTime = dateStrings[1];
      this.loadData(true);
    },
  },
};
</script>
  
<style scoped lang="scss">
$colorPrimary: #3370FF;

/deep/ .ant-calendar-range-picker-input:placeholder-shown {
  font-size: 12px;
}

.my-rate-style {
  display: inline;
  font-size: 12px;
  vertical-align: top;
}

.hotActivity_filter_row {
  background-color: #fff;
  padding: 10px 0;
  margin: 0 20px;
  border-bottom: 1px dashed #e2e2e2;
}

.hotActivity_filter_title {
  padding: 10px 0;
}

.hotActivity {
  background-color: #f6f6f6;
}

.hotActivity_advert {
  height: 200px;

  img {
    width: 100%;
    height: 100%;
  }
}

.hotActivity_list {
  margin-top: 30px !important;
  // padding: 10px;
  padding: 10px;
    background-color: #fff;
}

.hotActivity_list_item {
  width: 100%;
  // height: 190px;
  border-radius: 4px;
  display: flex;
  margin-bottom: 10px;
  // padding: 20px;
  position: relative;
  padding: 10px;

  // border: 1px solid #ccc;
  // background-color: #fff;
  .hotActivity_item_left {
    background-color: #fff;
    border: 1px solid #ccc;
    padding: 10px 20px;
    display: flex;

    .hotActivity_item_info {
      width: 150px;

      .info_middle {
        // width: 40px;
        margin-top: 25px;
      }

      .info_num {
        font-size: 18px;
        text-align: center;
      }

      p {
        text-align: center;
      }

      img {
        width: 150px;
      }

    }

    .hotActivity_item_sub {
      margin-left: 10px;
      flex: 1;

      .sub_title_wrap {
        display: flex;

        .sub_title {
          font-size: 18px;
          font-weight: 500;
          flex: 1;
        }

        .sub_icon_wrap {
          display: flex;
          // flex: 1;
          text-align: right;
        }

        .sub_icon1 {

          background-color: rgb(0, 120, 215);
          color: #fff;
          padding: 3px 5px 5px;
          border-radius: 5px;
          margin-right: 20px;

          img {
            width: 20px;
          }

        }

        .sub_icon2 {
          background-color: rgba(245, 154, 35, 1);
          color: #fff;
          // line-height: 40px;
          vertical-align: middle;
          padding: 3px 10px;
          border-radius: 5px;

        }
      }
      .evaluation_wrap {
        margin: 10px 0;
        img {
          width: 100px;
          margin-right: 10px;
        }
      }
      .introduce {
        font-size: 12px;
      }
      .registerInfo {
        color: #AAAAAA;
        font-size: 13px;
        margin-top: 10px;
      }
    }

    .info_more {
      text-align: right;
      color: #3370FF;
      margin-top: 25px;
      padding-right: 10px;
    }
  }

  .hotActivity_item_right {
    background-color: #fff;
    // border: 1px solid #ccc;
    display: flex;
    .hotActivity_right_col {
    border: 1px solid #ccc;
    padding: 10px;
      width: 150px;
      margin-left: 10px;
      img {
        width: 100%;
        height: 100px;
      }
      p {
        font-size: 12px;
        margin-top: 10px;
      }
    }
  }

}

.catalogBox {
  background: #fff;
  margin-bottom: 20px;
}

.titBox {
  background: #fff;
  border: 1px solid rgba(226, 226, 226, 1);
  padding: 0 5px;
  margin-right: 5px;
  display: inline-block;

  .firstChild {
    color: rgba(100, 100, 100, 1);
  }
}

.searchItem {
  margin-top: 10px;
}

.searchItem .titBox {
  background: #fff;
  border: 1px solid rgba(226, 226, 226, 1);
  margin-top: 9px;
  padding: 0 5px;
  margin-left: 10px;

  .firstChild {
    color: rgba(100, 100, 100, 1);
  }

  .twoChild {
    color: #1890ff;
  }
}

.filter-wrapper {
  width: 100%;
  margin: 20px auto;
  border-radius: 5px;
  background: #ffffff;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.08);

  // &:last-child {
  //   padding: 20px;
  // }

  .ant-radio-button-wrapper {
    padding-right: 30px;
    user-select: none;

    &:first-child {
      padding-right: 15px;
    }
  }

  .icon-wrapper {
    display: inline-block;
    position: absolute;
    right: 15px;

    i {
      font-size: 12px;
      color: #909090;
      display: block;

      &.active {
        color: var(--customThemeColor);
      }

      &:first-child {
        margin-top: 4px;
      }

      &:last-child {
        margin-top: -4px;
      }
    }
  }
}

.pagination-box {
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  padding-left: 10px;
}

.pagination-box .pagination-r {
  text-align: right;
}
</style>
  